<script setup lang="ts">
import { computed } from "vue";
export type Address = {
  country?: string;
  province?: string;
  city?: string;
  district?: string;
  detail?: string;
}
const props = defineProps<{ value: string }>()
const addressText = computed<string[]>(() => {
  const address: Address[] = (props.value ? JSON.parse(props.value) : [])
  return address.map(i => {
    return (i?.country || '') +
      (i?.province || '') +
      (i?.city || '') +
      (i?.district || '') +
      (i?.detail || '')
  })
})
</script>

<template>
<div class="flex flex-col space-y-0.5">
  <span class="text-sm" v-for="addr of addressText">{{ addr }}</span>
</div>
</template>
